<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .inputAdd{
            height: 20px;
            width: 150px;
        }
        .inputForm{
            position: fixed;
            width: 500px;
            height: 300px;
            top:50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
            border: 1px solid;
            background-color: #dddddd;
            z-index:50;
        }
        .overlay{
            position: fixed;
            background-color: #1b1616;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.6;
            z-index:20;

        }
        .content{

        }
    </style>
</head>
<body>

<div class="inputForm hide">
    <div style="padding-left: 130px;padding-top: 50px">
        <div>主机名：<input type="text" name="hostname" class="inputAdd"></div>
        <br>
        <div>端&nbsp;&nbsp;&nbsp;口：<input type="text" name="port" class="inputAdd"></div>
    </div>
    <div style="padding-top: 140px;padding-right: 30px">
        <div style="float: right;"><input id="sure" type="button" value="确定"></div>
        <div style="float: right;padding-right: 10px"><input id="cancel" type="button" value="取消"></div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="overlay hide"></div>

<div class="content">
    <div id="i1">
        <input type="button" value="添加">
    </div>
    <table border="1" width="400px">
        <thead>
            <tr>
                <th>hostname</th>
                <th>port</th>
                <th>edit</th>
                <th>del</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1.1.1</td>
                <td>22</td>
                <td class="edit"><a href="#">编辑</a></td>
                <td><a href="#">删除</a></td>
            </tr>
             <tr>
                <td>1.1.1.2</td>
                <td>22</td>
                <td class="edit"><a href="#">编辑</a></td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>1.1.1.3</td>
                <td>22</td>
                <td class="edit"><a href="#">编辑</a></td>
                <td><a href="#">删除</a></td>
            </tr>
        </tbody>
    </table>
</div>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
    $('#i1 input').click(function () {
        $('.overlay,.inputForm').removeClass('hide');
    });
    $('#sure,#cancel').click(function () {
        $('.overlay,.inputForm').addClass('hide');
        $('.inputAdd').val("");     //清空脏数据
    });


    $('.edit').click(function () {
        $('.overlay,.inputForm').removeClass('hide');
       var tds = $(this).prevAll();
        var hostname = $(tds[1]).text();
        var port = $(tds[0]).text();
        $('[name="hostname"]').val(hostname);
        $('[name="port"]').val(port);

    })

</script>

</body>
</html>